<!DOCTYPE html>
<html  lang="zh">
<head><link rel=manifest href=/manifest.json>
    <meta charset="utf-8" />

<meta name="generator" content="Hexo 4.1.1" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

 <!-- pwa 配置-->
 <link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.7/pwa/apple-touch-icon.png">
 <meta name="theme-color" content="white"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">


<title>cookie与webStorage的区别 - Fox - Future diary</title>


    <meta name="description" content="[TOC] 前言 小白一枚。面试时面试官询问 cookie与webstorage的区别，我脑海中居然不知道，面试下来立刻百度。  理论概念webStorage本地存储1、webstorage：是本地存储，存储在客户端。webstorage包括 localStorage和seesionStorage。">
<meta property="og:type" content="article">
<meta property="og:title" content="cookie与webStorage的区别">
<meta property="og:url" content="https://foxhuli.top/posts/9d21.html">
<meta property="og:site_name" content="Fox - Future diary">
<meta property="og:description" content="[TOC] 前言 小白一枚。面试时面试官询问 cookie与webstorage的区别，我脑海中居然不知道，面试下来立刻百度。  理论概念webStorage本地存储1、webstorage：是本地存储，存储在客户端。webstorage包括 localStorage和seesionStorage。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584729122032&di=be67c9396aa59dfe4b49c24f269b1cec&imgtype=0&src=http%253A%252F%252F5b0988e595225.cdn.sohucs.com%252Fimages%252F20180723%252F3f4f4d253cfe46649904ced8c8e90f01.jpeg">
<meta property="article:published_time" content="2020-03-19T08:36:22.000Z">
<meta property="article:modified_time" content="2020-03-25T10:44:43.701Z">
<meta property="article:author" content="Fox">
<meta property="article:tag" content="cookie 与 webstorage的区别">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584729122032&di=be67c9396aa59dfe4b49c24f269b1cec&imgtype=0&src=http%253A%252F%252F5b0988e595225.cdn.sohucs.com%252Fimages%252F20180723%252F3f4f4d253cfe46649904ced8c8e90f01.jpeg">



<link rel="canonical" href="https://foxhuli.top/" />





<link rel="icon" href="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.6/images/foxfavicon.png">


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.7.2/css/bulma.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:400,600|Source+Code+Pro">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/atom-one-dark.css">


    
    
<style>body>.footer,body>.navbar,body>.section{opacity:0}</style>

    
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/css/lightgallery.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/css/justifiedGallery.min.css">

    
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.css">

    
    
    
    
<link rel="stylesheet" href="/css/back-to-top.css">

    
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-160296449-1"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-160296449-1');
</script>

    
    <script>
var _hmt = _hmt || [];
(function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?14528986";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();
</script>
    
    
    
    <link rel="stylesheet" href="/css/progressbar.css">
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>
    
    <script async="" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    


<link rel="stylesheet" href="/css/style.css">

<link rel="alternate" href="/atom.xml" title="Fox - Future diary" type="application/atom+xml">
</head>
<body class="is-3-column">
    <nav class="navbar navbar-main">
    <div class="container">
        <div class="navbar-brand is-flex-center">
            <a class="navbar-item navbar-logo" href="/">
                <div>
                    
                        <img src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.5/images/foxlogo.png" alt="cookie与webStorage的区别" height="28">
                    
                </div>
            </a>
        </div>
        <div class="navbar-menu">
            
            <div class="navbar-start">
                
                <a class="navbar-item"
                href="/">首页</a>
                
                <a class="navbar-item"
                href="/archives">归档</a>
                
                <a class="navbar-item"
                href="/categories">分类</a>
                
                <a class="navbar-item"
                href="/tags">标签</a>
                
                <a class="navbar-item"
                href="/contact">留言板</a>
                
                <a class="navbar-item"
                href="/friends">友情链接</a>
                
                <a class="navbar-item"
                href="/about">关于</a>
                
            </div>
            
            <div class="navbar-end">
                
                
                <a class="navbar-item is-hidden-tablet catalogue" title="目录" href="javascript:;">
                    <i class="fas fa-list-ul"></i>
                </a>
                
                
                <a class="navbar-item search" title="搜索" href="javascript:;">
                    <i class="fas fa-search"></i>
                </a>
                
            </div>
        </div>
    </div>
</nav>
    


    <section class="section">
        <div class="container">
            <div class="columns">
                <div class="column is-8-tablet is-8-desktop is-6-widescreen has-order-2 column-main">
<div class="card">
    
    <div class="card-image">
        <span  class="image is-7by1">
            <img class="thumbnail" src="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1584729122032&amp;di=be67c9396aa59dfe4b49c24f269b1cec&amp;imgtype=0&amp;src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180723%2F3f4f4d253cfe46649904ced8c8e90f01.jpeg" alt="cookie与webStorage的区别">
        </span>
    </div>
    
    <div class="card-content article ">
        
        <div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
            <div class="level-left">
                <time class="level-item has-text-grey" datetime="2020-03-19T08:36:22.000Z">2020-03-19</time>
                
                <div class="level-item">
                <a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;/&nbsp;<a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/%E9%9D%A2%E8%AF%95/">面试</a>
                </div>
                
                
                <span class="level-item has-text-grey">
                    
                    
                    31 分钟 读完 (大约 4591 个字)
                </span>
                
                
                <span class="level-item has-text-grey" id="busuanzi_container_page_pv">
                    <i class="far fa-eye"></i>
                    的 <span id="busuanzi_value_page_pv">0</span> 次陪伴
                </span>
                
            </div>
        </div>
        
        <h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
            
                cookie与webStorage的区别
            
        </h1>
        <div class="content">
            <p>[TOC]</p>
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><blockquote>
<p>小白一枚。面试时面试官询问 cookie与webstorage的区别，我脑海中居然不知道，面试下来立刻百度。</p>
</blockquote>
<h2 id="理论概念"><a href="#理论概念" class="headerlink" title="理论概念"></a>理论概念</h2><h3 id="webStorage本地存储"><a href="#webStorage本地存储" class="headerlink" title="webStorage本地存储"></a>webStorage本地存储</h3><p>1、webstorage：是本地存储，存储在客户端。webstorage包括 localStorage和seesionStorage。</p>
<a id="more"></a>
<p>2、localStorage：生命周期是永久的，除非用户自动清理，说明窗口或浏览器关闭也一直保存，因此、用作持久数据。一般存放的数据大小为5MB，而且它只在客户端（浏览器）中保存，不参与和服务器之间的通信。</p>
<p>3、sessionStorage：仅在当前对话框有效，关闭会话或者关闭浏览器会被自动清除。存放的数据大小为5MB，只在客户端（浏览器）中保存，不参与和服务器通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持。</p>
<p>4、webstorage</p>
<ul>
<li>提供一种在cookie之外的存储会话数据的路径</li>
<li>提供一种存储大量可以跨会话存在的数据机制</li>
<li>提供2种存储方式，即 localstorage和sessionstorage</li>
</ul>
<p>5、作用域不同</p>
<ul>
<li>不同浏览器无法共享localStorage与sessionstorage中信息。</li>
<li>相同浏览器不同页面或者标签可以共享相同的 localstorage（页面属于相同的域名和端口）</li>
<li>不同页面或者不同标签 <strong>不可以</strong> 共享sessionstorage的信息。</li>
<li><strong>注： 页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的</strong></li>
</ul>
<p>6、存储大小：localstorage与sessionstorage存储数据容量都是5MB。</p>
<p>7、存储位置：localstorage与sessionstorage都存储在客户端，不参与服务器通信。</p>
<p>8、存储类型：localstorage与sessionstorage只能存储 字符串类型。对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。</p>
<p>9、获取方式：</p>
<ul>
<li>localstorage：采用 window.localstorage</li>
<li>sessionstorage：采用window.sessionstorage</li>
</ul>
<p>10、应用场景：</p>
<ul>
<li>localstorage：采用于长期登录、判断该用户是否已登录，适合长期保存在本地的数据。</li>
<li>sessionstorage：用于一次性账号。</li>
</ul>
<p>11、webstorage优点：</p>
<ul>
<li>存储空间大：cookie为4KB，webstorage为5MB</li>
<li>节省网络流量：webstorage不会将值传送给服务器，存储在本地可以直接获取；cookie每次请求传送给服务器，故此节约了客户端与服务器端之间的交互，节省了网络流量</li>
<li>对于用户需要浏览一组页面期间保存，关闭浏览器不需要就可以丢弃的数据，可以采用 sessionstorage。</li>
<li>快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快。</li>
<li>安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题<ul>
<li>WebStorage提供了一些方法，数据操作比cookie方便</li>
<li>setItem (key, value) —— 保存数据，以键值对的方式储存信息。</li>
<li>getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。</li>
<li>removeItem (key) —— 删除单个数据，根据键值移除对应的信息。</li>
<li>clear () —— 删除所有的数据</li>
<li>key (index) —— 获取某个索引的key</li>
</ul>
</li>
</ul>
<h3 id="cookie"><a href="#cookie" class="headerlink" title="cookie"></a>cookie</h3><p>1、HTTP Cookie简称cookie,在HTTP请求发送Set-Cookie HTTP头作为响应的一部分。通过name=value的形式存储。</p>
<p>2、cookie的构成：</p>
<ul>
<li>名称：name(不区分大小写,但最好认为它是区分的)</li>
<li>值:value(通过URL编码:encodeURIComponent)</li>
<li>域：当前浏览器、</li>
<li>失效时间：关闭浏览器，或者自己设置的失效时间</li>
<li>安全标志：设置安全标志后自由ssl连接的时候才会发送到服务器</li>
</ul>
<p>3、cookie的作用：主要用于存储登录信息</p>
<p>4、生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右 。有个数限制（各浏览器不同），一般不能超过20个。与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。</p>
<p>5、cookie的优点：</p>
<ul>
<li>具有极高的扩展性和可用性</li>
<li>通过良好的编程，控制保存在cookie中的session对象的大小</li>
<li>通过加密和安全传输技术，减少cookie被破解的可能性</li>
<li>只有在cookie中存放不敏感的数据，即使被盗取也不会有很大的损失</li>
<li>控制cookie的生命期，使之不会永远有效。这样的话偷盗者很可能拿到的就 是一个过期的cookie</li>
</ul>
<p>6、cookie的缺点：</p>
<ul>
<li>长度和数量限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉</li>
<li>安全性问题。如果cookie被人拦掉了，那个人就可以获取到所有session信息。加密的话也不起什么作用</li>
<li>有些状态不可能保存在客户端。</li>
</ul>
<h3 id="sessionStorage"><a href="#sessionStorage" class="headerlink" title="sessionStorage"></a>sessionStorage</h3><p>1、sessionStorage是Storage类型的一个对象，拥有clear(),getItem(name),key(index),removeItem(name),setItem(name,value)方法</p>
<p>2、sessionStorage对象存储特定于某个会话的数据,也就是该数据只保持到浏览器关闭</p>
<p>3、将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据</p>
<p>4、sessionStorage为临时保存</p>
<h3 id="localstorage"><a href="#localstorage" class="headerlink" title="localstorage"></a>localstorage</h3><p>1、localStorage也是Storage类型的一个对象</p>
<p>2、在HTML5中localStorage作为持久保存在客户端数据的方案取代了globalStorage(globalStorage必须指定域名)</p>
<p>3、localStorage会永久存储会话数据，除非removeItem,否则会话数据一直存在<br>4、将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用<br>5、localStorage为永久保存</p>
<h3 id="globalStorage"><a href="#globalStorage" class="headerlink" title="globalStorage"></a>globalStorage</h3><p>在浏览器关闭以后，使用globalStorage存储的信息仍能够保留下来，并且存储容量比IE的userdata大得多，一个域下面是5120k。和sessionStorage一样，域中任何一个页面存储的信息都能被所有的页面共享。</p>
<p>1、作用域：<br></p><figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">globalStorage[<span class="string">''</span>] <span class="comment">//所有下面的页面都可以使用这块空间</span></span><br><span class="line">globalStorage[<span class="string">''</span>]  <span class="comment">//所有下面的页面都可以使用这块空间</span></span><br><span class="line">globalStorage[<span class="string">'com'</span>] <span class="comment">//所有com域名都可以 共享的使用这一块空间</span></span><br><span class="line">globalStorage[<span class="string">''</span>] <span class="comment">//所有页面都可以使用的空间</span></span><br></pre></td></tr></tbody></table></figure><p></p>
<p><strong>注：现在Firefox只支持当前域下的globalStorage存储， 如果使用公用域会导致一个这样一个类似的错误“Security error” code: “1000”。</strong></p>
<p>2、有效期</p>
<p>​      按照HTML5的描述，globalStorage只在安全问题或者当用户要求时才会过期，浏览器应该避免删除那些正在被脚本访问的数据，并且userdata应该是用户可写的。<br>​      因此我们的脚本要能够控制过期时间，可以在globalStorage的某个区域存储过期时间，在load的时候判断是否过期，可以在一定程度上解决过期时间的问题。</p>
<p>详情参考：[ localstorage || globalStorage || userData ]</p>
<h3 id="图例"><a href="#图例" class="headerlink" title="图例"></a>图例</h3><p><img src="https://img-blog.csdnimg.cn/20190530212538979.png" alt="cookie与sessionstorage、localstorage区别"></p>
<h2 id="cookie-与webstorage区别"><a href="#cookie-与webstorage区别" class="headerlink" title="cookie 与webstorage区别"></a>cookie 与webstorage区别</h2><h4 id="本地储存localStorage与cookie的区别"><a href="#本地储存localStorage与cookie的区别" class="headerlink" title="本地储存localStorage与cookie的区别"></a>本地储存localStorage与cookie的区别</h4><ul>
<li>cookie在浏览器与服务器之间来回传递<ul>
<li>sessionStorage和localStorage不会把数据发给服务器，仅在本地保存</li>
</ul>
</li>
<li>数据有效期不同<ul>
<li>cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭</li>
<li>sessionStorage：仅在当前浏览器窗口关闭前有效</li>
<li>localStorage 始终有效，长期保存</li>
</ul>
</li>
<li>cookie数据还有路径的概念，可以限制cookie只属于某个路径下，存储大小也不同，cookie数据不能超过4k，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。</li>
<li>作用域不用<ul>
<li>sessionStorage不在不同的浏览器窗口中共享</li>
<li>localStorage在所有同源窗口中都是共享的</li>
<li>cookie也是在所有同源窗口中都是共享的</li>
<li>WebStorage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便</li>
</ul>
</li>
</ul>
<h4 id="cookie、session和localStorage的区别"><a href="#cookie、session和localStorage的区别" class="headerlink" title="cookie、session和localStorage的区别"></a>cookie、session和localStorage的区别</h4><ul>
<li>cookie的内容主要包括：名字、值、过期时间、路径和域，路径与域一起构成cookie的作用范围。若不设置时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就会消失，这种生命期为浏览器会话期的cookie被称为会话cookie</li>
<li>会话cookie一般不存储在硬盘而是保存在内存里，当然这个行为并不是规范规定的。若设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再打开浏览器这些cookie仍然有效直到超过设定的过期时间。对于保存在内存里的cookie，不同的浏览器有不同的处理方式session机制。</li>
<li>当程序需要为某个客户端的请求创建一个session时，服务器首先检查这个客户端的请求里是否已包含了一个session标识（称为sessionid），如果已包含则说明以前已经为此客户端创建过session，服务器就按照session id把这个session检索出来使用（检索不到，会新建一个），如果客户端请求不包含sessionid，则为客户端创建一个session并且生成一个与此session相关联的sessionid，session id的值应该是一个既不会重复，又不容易被找到规律以仿造的字符串，这个sessionid将被在本次响应中返回给客户端保存。保存这个sessionid的方式可以采用cookie，这样在交互过程中浏览器可以自动的按照规则把这个标识发送给服务器。</li>
</ul>
<h4 id="cookie和session的区别"><a href="#cookie和session的区别" class="headerlink" title="cookie和session的区别"></a>cookie和session的区别</h4><ul>
<li>cookie数据存放在客户的浏览器上，session数据放在服务器上</li>
<li>cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session</li>
<li>session会在一定时间内保存在服务器上，当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用cookie</li>
<li>单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie</li>
<li><strong>建议将登录信息等重要信息存放为session，其他信息如果需要保留，可以放在cookie中</strong></li>
<li>session保存在服务器，客户端不知道其中的信心；cookie保存在客户端，服务器能够知道其中的信息</li>
<li>session中保存的是对象，cookie中保存的是字符串</li>
<li>session不能区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到，而cookie中如果设置了路径参数，那么同一个网站中不同路径下的cookie互相是访问不到的</li>
</ul>
<h4 id="webStorage和cookie的区别"><a href="#webStorage和cookie的区别" class="headerlink" title="webStorage和cookie的区别"></a>webStorage和cookie的区别</h4><ul>
<li>WebStorage的概念和cookie相似，区别是它是为了更大容量存储设计的，cookie的大小是受限的，并且每次请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可跨域调用</li>
<li>webstorage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie</li>
<li>cookie也是不可或缺的，cookie的作用是与服务器进行交互，作为http规范的一部分而存在的，而web Storage仅仅是为了在本地<strong>存储</strong>数据而生</li>
<li>sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念，sessionStorage是在同源的同窗口中，始终存在的数据，也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一个页面，数据仍然存在，关闭窗口后，sessionStorage就会被销毁，同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的</li>
<li>Web Storage的好处<ul>
<li>减少网络流量：一旦数据保存在本地之后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要的来回传递</li>
<li>快速显示数据：性能好，从本地读数据比通过网络从服务器上获得数据快得多，本地数据可以及时获得，再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示</li>
<li>临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便</li>
</ul>
</li>
</ul>
<h4 id="浏览器本地存储与服务器端存储的区别"><a href="#浏览器本地存储与服务器端存储的区别" class="headerlink" title="浏览器本地存储与服务器端存储的区别"></a>浏览器本地存储与服务器端存储的区别</h4><ul>
<li>数据既可以在浏览器本地存储，也可以在服务器端存储</li>
<li>浏览器可以保存一些数据，需要的时候直接从本地存取，sessionStorage、localStorage和cookie都是由浏览器存储在本地的数据</li>
<li>服务器端也可以保存所有用户的所有数据，但需要的时候浏览器要向服务器请求数据</li>
<li>服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端 ，服务器端也可以保存用户的临时会话数据，服务器端的session机制，如jsp的session对象，数据保存在服务器上</li>
<li>服务器和浏览器之间仅需传递sessionid即可，服务器根据sessionid找到对应用户的session对象，会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期</li>
<li>服务器端保存所有的用户的数据，所以服务器端的开销较大，而浏览器端保存则把不同用户需要的数据分别保存在用户各自的浏览器中，浏览器端一般只用来存储小数据，而非服务可以存储大数据或小数据服务器存储数据安全一些，浏览器只适合存储一般数据</li>
</ul>
<h4 id="sessionStorage、localStorage和cookie的区别"><a href="#sessionStorage、localStorage和cookie的区别" class="headerlink" title="sessionStorage、localStorage和cookie的区别"></a>sessionStorage、localStorage和cookie的区别</h4><ul>
<li>相同点是都是保存在浏览器端、且同源的</li>
<li>cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下</li>
<li>存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大</li>
<li>数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭</li>
<li>作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的</li>
<li>webStorage支持事件通知机制，可以将数据更新的通知发送给监听者</li>
<li>web Storage的api接口使用更方便</li>
</ul>
<h4 id="sessionStorage与页面js数据对象的区别"><a href="#sessionStorage与页面js数据对象的区别" class="headerlink" title="sessionStorage与页面js数据对象的区别"></a>sessionStorage与页面js数据对象的区别</h4><ul>
<li>页面中一般的js对象的生存期仅在当前页面有效，因此刷新页面或转到另一页面这样的重新加载页面的情况，数据就不存在了</li>
<li>sessionStorage只要同源的同窗口中，刷新页面或进入同源的不同页面，数据始终存在，也就是说只要浏览器不关闭，数据仍然存在</li>
</ul>
<h2 id="参考来源"><a href="#参考来源" class="headerlink" title="参考来源"></a>参考来源</h2><p>cookie、sessionStorage和localStorage的区别: <a href="https://blog.csdn.net/weixin_42614080/article/details/90706499">https://blog.csdn.net/weixin_42614080/article/details/90706499</a></p>
<p>localstorage || globalStorage || userData: <a href="https://www.cnblogs.com/jiechn/p/4080503.html">https://www.cnblogs.com/jiechn/p/4080503.html</a></p>
<script>
        document.querySelectorAll('.github-emoji')
          .forEach(el => {
            if (!el.dataset.src) { return; }
            const img = document.createElement('img');
            img.style = 'display:none !important;';
            img.src = el.dataset.src;
            img.addEventListener('error', () => {
              img.remove();
              el.style.color = 'inherit';
              el.style.backgroundImage = 'none';
              el.style.background = 'none';
            });
            img.addEventListener('load', () => {
              img.remove();
            });
            document.body.appendChild(img);
          });
      </script>
        </div>
        
        <div class="level is-size-7 is-uppercase">
            <div class="level-start">
                <div class="level-item">
                    <span class="is-size-6 has-text-grey has-mr-7">#</span>
                    <a class="has-link-grey -link" href="/tags/cookie-%E4%B8%8E-webstorage%E7%9A%84%E5%8C%BA%E5%88%AB/" rel="tag">cookie 与 webstorage的区别</a>
                </div>
            </div>
        </div>
        
        
        
        <div class="social-share"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/css/share.min.css">
<script src="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/js/social-share.min.js"></script>
        
    </div>
</div>



<div class="card">
    <div class="card-content">
        <h3 class="menu-label has-text-centered">喜欢这篇文章？打赏一下作者吧</h3>
        <div class="buttons is-centered">
            
                
<a class="button is-info donate">
    <span class="icon is-small">
        <i class="fab fa-alipay"></i>
    </span>
    <span>支付宝</span>
    <div class="qrcode"><img src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.1/images/zalipay.jpg" alt="支付宝"></div>
</a>

                
                
<a class="button is-success donate">
    <span class="icon is-small">
        <i class="fab fa-weixin"></i>
    </span>
    <span>微信</span>
    <div class="qrcode"><img src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.1/images/zweixinplay.jpg" alt="微信"></div>
</a>

                
        </div>
    </div>
</div>



<div class="card card-transparent">
    <div class="level post-navigation is-flex-wrap is-mobile">
        
        <div class="level-start">
            <a class="level level-item has-link-grey  article-nav-prev" href="/posts/a57c.html">
                <i class="level-item fas fa-chevron-left"></i>
                <span class="level-item">初级前端综合面试题-1</span>
            </a>
        </div>
        
        
        <div class="level-end">
            <a class="level level-item has-link-grey  article-nav-next" href="/posts/2440.html">
                <span class="level-item">全功能JavaScript灯箱画廊插件lightgallery.js</span>
                <i class="level-item fas fa-chevron-right"></i>
            </a>
        </div>
        
    </div>
</div>



<div class="card">
    <div class="card-content">
        <h3 class="title is-5 has-text-weight-normal">评论</h3>
        
<div id="valine-thread" class="content"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js"></script>
<script>
    new Valine({
        el: '#valine-thread' ,
        notify: false,
        verify: true,
        app_id: 'LliwJqiOd8MS79CDFo9tGFEX-gzGzoHsz',
        app_key: '05cdCDsmfHxxo8UIOvcDFaq5',
        placeholder: 'just go go'
    });
</script>

    </div>
</div>
</div>
                
    

    

    

    


    <div class="column 11 is-4-tablet is-4-desktop is-3-widescreen  has-order-1 column-left ">
        
        
<!-- 个人资料 -->
<div class="card widget">
    <div class="card-content">
        <nav class="level">
            <div class="level-item has-text-centered" style="flex-shrink: 1">
                <div>
                    
                    
                    <figure class="image is-128x128 has-mb-6">
                        <img class="is-rounded" src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.4/images/z_avater.png"
                            alt="Fox"
                            style="">
                    </figure>
                    
                    <p class="is-size-4 is-block">
                        Fox
                    </p>
                    
                    
                    
                    <p class="is-size-6 is-flex is-flex-center has-text-grey">
                        <i class="fas fa-map-marker-alt has-mr-7"></i>
                        <span>chengdu - china</span>
                    </p>
                    
                </div>
            </div>
        </nav>
        <nav class="level is-mobile">
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        文章
                    </p>
                    <a href="/archives">
                        <p class="title has-text-weight-normal">
                            17
                        </p>
                    </a>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        分类
                    </p>
                    <a href="/categories">
                        <p class="title has-text-weight-normal">
                            5
                        </p>
                    </a>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        标签
                    </p>
                    <a href="/tags">
                        <p class="title has-text-weight-normal">
                            13
                        </p>
                    </a>
                </div>
            </div>
        </nav>
        
        <div class="level">
            <a class="level-item button is-link is-rounded" href="https://github.com/foxhuli229" target="_blank"
                rel="noopener">
                关注我</a>
        </div>
        
        
        
        <div class="level is-mobile">
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener" title="Github"
                href="https://github.com/foxhuli229">
                
                <i class="fab fa-github"></i>
                
            </a>
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener" title="Facebook"
                href="https://facebook.com">
                
                <i class="fab fa-facebook"></i>
                
            </a>
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener" title="Twitter"
                href="https://twitter.com">
                
                <i class="fab fa-twitter"></i>
                
            </a>
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener" title="Dribbble"
                href="https://dribbble.com">
                
                <i class="fab fa-dribbble"></i>
                
            </a>
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener" title="RSS"
                href="/">
                
                <i class="fas fa-rss"></i>
                
            </a>
            
        </div>
        
    </div>
</div>
        
        
<div class="card widget">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                分类
            </h3>
            <ul class="menu-list">
            <li>
        <a class="level is-marginless" href="/categories/hexo/">
            <span class="level-start">
                <span class="level-item">hexo</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/categories/vue/">
            <span class="level-start">
                <span class="level-item">vue</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">3</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/categories/%E5%89%8D%E7%AB%AF/">
            <span class="level-start">
                <span class="level-item">前端</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">12</span>
            </span>
        </a><ul><li>
        <a class="level is-marginless" href="/categories/%E5%89%8D%E7%AB%AF/vue/">
            <span class="level-start">
                <span class="level-item">vue</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/categories/%E5%89%8D%E7%AB%AF/%E9%9D%A2%E8%AF%95/">
            <span class="level-start">
                <span class="level-item">面试</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">4</span>
            </span>
        </a></li></ul></li>
            </ul>
        </div>
    </div>
</div>
        
        <div class="card widget">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                标签
            </h3>
            <div class="field is-grouped is-grouped-multiline">
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/JavaScript/">
                        <span class="tag">JavaScript</span>
                        <span class="tag is-grey">5</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/SVG/">
                        <span class="tag">SVG</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/cookie-%E4%B8%8E-webstorage%E7%9A%84%E5%8C%BA%E5%88%AB/">
                        <span class="tag">cookie 与 webstorage的区别</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/hexo/">
                        <span class="tag">hexo</span>
                        <span class="tag is-grey">2</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/hexo-theme-matery/">
                        <span class="tag">hexo-theme-matery</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/lightgallery-js/">
                        <span class="tag">lightgallery.js</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/vue/">
                        <span class="tag">vue</span>
                        <span class="tag is-grey">2</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/vue-admin-template/">
                        <span class="tag">vue-admin-template</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/vue%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD%E6%A8%A1%E5%9D%97/">
                        <span class="tag">vue异步加载模块</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/vue%E7%BB%84%E4%BB%B6/">
                        <span class="tag">vue组件</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/">
                        <span class="tag">前端面试</span>
                        <span class="tag is-grey">3</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/%E5%8E%BB%E5%93%AA%E5%84%BF%E7%BD%91/">
                        <span class="tag">去哪儿网</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/%E6%95%B0%E7%BB%84/">
                        <span class="tag">数组</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
            </div>
        </div>
    </div>
</div>
        
        
        <div class="column-right-shadow is-hidden-widescreen ">
            
            <!-- 个人信息-目录 -->


    <div class="card widget" id="toc">
        <div class="card-content">
            <div class="menu">
                <h3 class="menu-label">
                    目录
                </h3>
                <ul class="menu-list"><li>
        <a class="is-flex" href="#前言">
        <span class="has-mr-6">1</span>
        <span>前言</span>
        </a></li><li>
        <a class="is-flex" href="#理论概念">
        <span class="has-mr-6">2</span>
        <span>理论概念</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#webStorage本地存储">
        <span class="has-mr-6">2.1</span>
        <span>webStorage本地存储</span>
        </a></li><li>
        <a class="is-flex" href="#cookie">
        <span class="has-mr-6">2.2</span>
        <span>cookie</span>
        </a></li><li>
        <a class="is-flex" href="#sessionStorage">
        <span class="has-mr-6">2.3</span>
        <span>sessionStorage</span>
        </a></li><li>
        <a class="is-flex" href="#localstorage">
        <span class="has-mr-6">2.4</span>
        <span>localstorage</span>
        </a></li><li>
        <a class="is-flex" href="#globalStorage">
        <span class="has-mr-6">2.5</span>
        <span>globalStorage</span>
        </a></li><li>
        <a class="is-flex" href="#图例">
        <span class="has-mr-6">2.6</span>
        <span>图例</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#cookie-与webstorage区别">
        <span class="has-mr-6">3</span>
        <span>cookie 与webstorage区别</span>
        </a><ul class="menu-list"><ul class="menu-list"><li>
        <a class="is-flex" href="#本地储存localStorage与cookie的区别">
        <span class="has-mr-6">3.1.1</span>
        <span>本地储存localStorage与cookie的区别</span>
        </a></li><li>
        <a class="is-flex" href="#cookie、session和localStorage的区别">
        <span class="has-mr-6">3.1.2</span>
        <span>cookie、session和localStorage的区别</span>
        </a></li><li>
        <a class="is-flex" href="#cookie和session的区别">
        <span class="has-mr-6">3.1.3</span>
        <span>cookie和session的区别</span>
        </a></li><li>
        <a class="is-flex" href="#webStorage和cookie的区别">
        <span class="has-mr-6">3.1.4</span>
        <span>webStorage和cookie的区别</span>
        </a></li><li>
        <a class="is-flex" href="#浏览器本地存储与服务器端存储的区别">
        <span class="has-mr-6">3.1.5</span>
        <span>浏览器本地存储与服务器端存储的区别</span>
        </a></li><li>
        <a class="is-flex" href="#sessionStorage、localStorage和cookie的区别">
        <span class="has-mr-6">3.1.6</span>
        <span>sessionStorage、localStorage和cookie的区别</span>
        </a></li><li>
        <a class="is-flex" href="#sessionStorage与页面js数据对象的区别">
        <span class="has-mr-6">3.1.7</span>
        <span>sessionStorage与页面js数据对象的区别</span>
        </a></li></ul></ul></li><li>
        <a class="is-flex" href="#参考来源">
        <span class="has-mr-6">4</span>
        <span>参考来源</span>
        </a></li></ul>
            </div>
        </div>
    </div>

            
            <!-- 最近/最新的文章 -->
<div class="card widget">
    <div class="card-content">
        <h3 class="menu-label">
            最新文章
        </h3>
        
        <article class="media">
            
            <a href="/posts/7358.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://cn.vuejs.org/images/logo.png" alt="component组件嵌套，导致页面重复渲染，重复请求的bug">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-23T02:18:20.000Z">2020-05-23</time></div>
                    <a href="/posts/7358.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">component组件嵌套，导致页面重复渲染，重复请求的bug</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/2b18.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://cn.vuejs.org/images/logo.png" alt="vue异步加载模块">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-22T23:18:18.000Z">2020-05-23</time></div>
                    <a href="/posts/2b18.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">vue异步加载模块</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/54f1.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://panjiachen.gitee.io/vue-element-admin-site/home.png" alt="vue-admin-template模板添加tagsview">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-02T16:22:02.000Z">2020-05-03</time></div>
                    <a href="/posts/54f1.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">vue-admin-template模板添加tagsview</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/1d48.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1051132835,1344326547&amp;fm=26&amp;gp=0.jpg" alt="关于 hexo 对文章渲染 {{ }} 解析的问题">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-02T09:40:49.000Z">2020-05-02</time></div>
                    <a href="/posts/1d48.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">关于 hexo 对文章渲染 {{ }} 解析的问题</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/hexo/">hexo</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/6659.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1102488500,1890914533&amp;fm=26&amp;gp=0.jpg" alt="初级前端综合面试题-3">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-04-26T05:14:51.000Z">2020-04-26</time></div>
                    <a href="/posts/6659.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">初级前端综合面试题-3</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a> / <a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/%E9%9D%A2%E8%AF%95/">面试</a>
                    </p>
                </div>
            </div>
        </article>
        
    </div>
</div>
            
            <!-- 个人信息-归档 -->
<div class="card widget">
    <div class="card-content">
        <div class="menu">
        <h3 class="menu-label">
            归档
        </h3>
        <ul class="menu-list">
        
        <li>
            <a class="level is-marginless" href="/archives/2020/05/">
                <span class="level-start">
                    <span class="level-item">五月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">4</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/04/">
                <span class="level-start">
                    <span class="level-item">四月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/03/">
                <span class="level-start">
                    <span class="level-item">三月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">8</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/01/">
                <span class="level-start">
                    <span class="level-item">一月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">1</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2019/12/">
                <span class="level-start">
                    <span class="level-item">十二月 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        </ul>
        </div>
    </div>
</div>
            
        </div>
        
    </div>


                
    

    

    

    


    <div class="column 11 is-4-tablet is-4-desktop is-3-widescreen is-hidden-touch is-hidden-desktop-only has-order-3 column-right ">
        
        <!-- 个人信息-目录 -->


    <div class="card widget" id="toc">
        <div class="card-content">
            <div class="menu">
                <h3 class="menu-label">
                    目录
                </h3>
                <ul class="menu-list"><li>
        <a class="is-flex" href="#前言">
        <span class="has-mr-6">1</span>
        <span>前言</span>
        </a></li><li>
        <a class="is-flex" href="#理论概念">
        <span class="has-mr-6">2</span>
        <span>理论概念</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#webStorage本地存储">
        <span class="has-mr-6">2.1</span>
        <span>webStorage本地存储</span>
        </a></li><li>
        <a class="is-flex" href="#cookie">
        <span class="has-mr-6">2.2</span>
        <span>cookie</span>
        </a></li><li>
        <a class="is-flex" href="#sessionStorage">
        <span class="has-mr-6">2.3</span>
        <span>sessionStorage</span>
        </a></li><li>
        <a class="is-flex" href="#localstorage">
        <span class="has-mr-6">2.4</span>
        <span>localstorage</span>
        </a></li><li>
        <a class="is-flex" href="#globalStorage">
        <span class="has-mr-6">2.5</span>
        <span>globalStorage</span>
        </a></li><li>
        <a class="is-flex" href="#图例">
        <span class="has-mr-6">2.6</span>
        <span>图例</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#cookie-与webstorage区别">
        <span class="has-mr-6">3</span>
        <span>cookie 与webstorage区别</span>
        </a><ul class="menu-list"><ul class="menu-list"><li>
        <a class="is-flex" href="#本地储存localStorage与cookie的区别">
        <span class="has-mr-6">3.1.1</span>
        <span>本地储存localStorage与cookie的区别</span>
        </a></li><li>
        <a class="is-flex" href="#cookie、session和localStorage的区别">
        <span class="has-mr-6">3.1.2</span>
        <span>cookie、session和localStorage的区别</span>
        </a></li><li>
        <a class="is-flex" href="#cookie和session的区别">
        <span class="has-mr-6">3.1.3</span>
        <span>cookie和session的区别</span>
        </a></li><li>
        <a class="is-flex" href="#webStorage和cookie的区别">
        <span class="has-mr-6">3.1.4</span>
        <span>webStorage和cookie的区别</span>
        </a></li><li>
        <a class="is-flex" href="#浏览器本地存储与服务器端存储的区别">
        <span class="has-mr-6">3.1.5</span>
        <span>浏览器本地存储与服务器端存储的区别</span>
        </a></li><li>
        <a class="is-flex" href="#sessionStorage、localStorage和cookie的区别">
        <span class="has-mr-6">3.1.6</span>
        <span>sessionStorage、localStorage和cookie的区别</span>
        </a></li><li>
        <a class="is-flex" href="#sessionStorage与页面js数据对象的区别">
        <span class="has-mr-6">3.1.7</span>
        <span>sessionStorage与页面js数据对象的区别</span>
        </a></li></ul></ul></li><li>
        <a class="is-flex" href="#参考来源">
        <span class="has-mr-6">4</span>
        <span>参考来源</span>
        </a></li></ul>
            </div>
        </div>
    </div>

        
        <!-- 最近/最新的文章 -->
<div class="card widget">
    <div class="card-content">
        <h3 class="menu-label">
            最新文章
        </h3>
        
        <article class="media">
            
            <a href="/posts/7358.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://cn.vuejs.org/images/logo.png" alt="component组件嵌套，导致页面重复渲染，重复请求的bug">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-23T02:18:20.000Z">2020-05-23</time></div>
                    <a href="/posts/7358.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">component组件嵌套，导致页面重复渲染，重复请求的bug</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/2b18.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://cn.vuejs.org/images/logo.png" alt="vue异步加载模块">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-22T23:18:18.000Z">2020-05-23</time></div>
                    <a href="/posts/2b18.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">vue异步加载模块</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/54f1.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://panjiachen.gitee.io/vue-element-admin-site/home.png" alt="vue-admin-template模板添加tagsview">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-02T16:22:02.000Z">2020-05-03</time></div>
                    <a href="/posts/54f1.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">vue-admin-template模板添加tagsview</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/1d48.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1051132835,1344326547&amp;fm=26&amp;gp=0.jpg" alt="关于 hexo 对文章渲染 {{ }} 解析的问题">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-02T09:40:49.000Z">2020-05-02</time></div>
                    <a href="/posts/1d48.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">关于 hexo 对文章渲染 {{ }} 解析的问题</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/hexo/">hexo</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/6659.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1102488500,1890914533&amp;fm=26&amp;gp=0.jpg" alt="初级前端综合面试题-3">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-04-26T05:14:51.000Z">2020-04-26</time></div>
                    <a href="/posts/6659.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">初级前端综合面试题-3</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a> / <a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/%E9%9D%A2%E8%AF%95/">面试</a>
                    </p>
                </div>
            </div>
        </article>
        
    </div>
</div>
        
        <!-- 个人信息-归档 -->
<div class="card widget">
    <div class="card-content">
        <div class="menu">
        <h3 class="menu-label">
            归档
        </h3>
        <ul class="menu-list">
        
        <li>
            <a class="level is-marginless" href="/archives/2020/05/">
                <span class="level-start">
                    <span class="level-item">五月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">4</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/04/">
                <span class="level-start">
                    <span class="level-item">四月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/03/">
                <span class="level-start">
                    <span class="level-item">三月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">8</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/01/">
                <span class="level-start">
                    <span class="level-item">一月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">1</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2019/12/">
                <span class="level-start">
                    <span class="level-item">十二月 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        </ul>
        </div>
    </div>
</div>
        
        
    </div>


            </div>
        </div>
    </section>
    <footer class="footer">
    <div class="container">
        <div class="level">
            <div class="level-start has-text-centered-mobile">
                <!-- <a class="footer-logo is-block has-mb-6" href="/">
                    
                    <img src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.5/images/foxlogo.png" alt="cookie与webStorage的区别" height="28">
                    
                </a> -->
                <p class="is-size-7">

                    
                    <!-- 不蒜子统计 -->
                    <span id="busuanzi_container_site_uv">
                        ❤️ 感谢 <span id="busuanzi_value_site_uv">0</span> 位小伙伴
                        的 <span id="busuanzi_value_page_pv">0</span> 次陪伴
                    </span>
                    

                    
                        <br>
                        <span id="sitetime">载入运行时间...</span>
                        <script>
                            function siteTime() {
                                var seconds = 1000;
                                var minutes = seconds * 60;
                                var hours = minutes * 60;
                                var days = hours * 24;
                                var years = days * 365;
                                var today = new Date();
                                var startYear = "2020";
                                var startMonth = "3";
                                var startDate = "08";
                                var startHour = "0";
                                var startMinute = "0";
                                var startSecond = "0";
                                var todayYear = today.getFullYear();
                                var todayMonth = today.getMonth() + 1;
                                var todayDate = today.getDate();
                                var todayHour = today.getHours();
                                var todayMinute = today.getMinutes();
                                var todaySecond = today.getSeconds();
                                var t1 = Date.UTC(startYear, startMonth, startDate, startHour, startMinute, startSecond);
                                var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
                                var diff = t2 - t1;
                                var diffYears = Math.floor(diff / years);
                                var diffDays = Math.floor((diff / days) - diffYears * 365);
                                var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
                                var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) /
                                    minutes);
                                var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
                                    diffMinutes * minutes) / seconds);
                                if (startYear == todayYear) {
                                    // document.getElementById("year").innerHTML = todayYear;
                                    document.getElementById("sitetime").innerHTML = "本站已安全运行 " + diffDays + " 天 " + diffHours +
                                        " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
                                } else {
                                    // document.getElementById("year").innerHTML = startYear + " - " + todayYear;
                                    document.getElementById("sitetime").innerHTML = "本站已安全运行 " + diffYears + " 年 " + diffDays +
                                        " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
                                }
                            }
                            setInterval(siteTime, 1000);
                        </script>
                    

                    <!-- 站长统计 -->
                    
                        <br>
                        <script type="text/javascript">
                            document.write(unescape("%3Cspan id='cnzz_stat_icon_1278694833'%3E%3C/span%3E%3Cscript src='https://s9.cnzz.com/z_stat.php%3Fid%3D1278694833%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));
                        </script>
                    

                    <!-- 域名信息 -->
                    
                    <br>
                    <span id="icp"><img src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.0/source/medias/icp.png"
                            style="vertical-align: text-bottom;" />
                        <a href="http://beian.miit.gov.cn/state/outPortal/loginPortal.action" target="_blank">渝ICP备18015404号</a>
                    </span>
                    

                    <br>
                    <!-- 版权信息 -->
                    
                    &copy; 2020 Fox&nbsp;
                    Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> & <a
                        href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a>
                    & <a href="https://foxhuli.top/" target="_blank" rel="noopener">Fox</a>
                </p>
            </div>

            <!-- 访问链接 -->
            <div class="level-end">
                
                <div class="field has-addons is-flex-center-mobile has-mt-5-mobile is-flex-wrap is-flex-middle">
                    
                    <p class="control">
                        <a class="button is-white is-large" target="_blank"
                            rel="noopener" title="掘金"
                            href="https://juejin.im/user/5d36544b6fb9a07efd474ae0/">
                            
                                
                                    <span>掘</span>
                                
                            
                        </a>
                    </p>
                    
                    <p class="control">
                        <a class="button is-white is-large" target="_blank"
                            rel="noopener" title="简书"
                            href="https://www.jianshu.com/u/e1f2e756cb5e/">
                            
                                
                                    <span>简</span>
                                
                            
                        </a>
                    </p>
                    
                    <p class="control">
                        <a class="button is-white is-large" target="_blank"
                            rel="noopener" title="知乎"
                            href="https://www.zhihu.com/people/hu-li-60-36-4/activities/">
                            
                                
                                    <span>知</span>
                                
                            
                        </a>
                    </p>
                    
                    <p class="control">
                        <a class="button is-white is-large" target="_blank"
                            rel="noopener" title="CDSN"
                            href="https://blog.csdn.net/xiaohuli_hyr/">
                            
                                
                                    <span>C</span>
                                
                            
                        </a>
                    </p>
                    
                    <p class="control">
                        <a class="button is-white is-large" target="_blank"
                            rel="noopener" title="My GitHub"
                            href="https://github.com/foxhuli229?tab=repositories">
                            
                                
                                    <i class="fab fa-github"></i>
                                
                            
                        </a>
                    </p>
                    
                </div>
                
            </div>

        </div>
    </div>
</footer>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/min/moment-with-locales.min.js"></script>
<script>moment.locale("zh-CN");</script>


<script>
var IcarusThemeSettings = {
    site: {
        url: 'https://foxhuli.top',
        external_link: {"enable":true,"exclude":[]}
    },
    article: {
        highlight: {
            clipboard: true,
            fold: 'unfolded'
        }
    }
};
</script>


<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.min.js" defer></script>





<script src="/js/animation.js"></script>



<script src="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/js/lightgallery.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js" defer></script>
<script src="/js/gallery.js" defer></script>



<div id="outdated">
    <h6>Your browser is out-of-date!</h6>
    <p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update
            my browser now </a></p>
    <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.js" defer></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        outdatedBrowser({
            bgColor: '#f25648',
            color: '#ffffff',
            lowerThan: 'flex'
        });
    });
</script>





<a id="back-to-top" title="回到顶端" href="javascript:;">
    <i class="fas fa-chevron-up"></i>
</a>
<script src="/js/back-to-top.js" defer></script>














<script src="/js/main.js" defer></script>

    
    <div class="searchbox ins-search">
    <div class="searchbox-container ins-search-container">
        <div class="searchbox-input-wrapper">
            <input type="text" class="searchbox-input ins-search-input" placeholder="想要查找什么..." />
            <span class="searchbox-close ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="searchbox-result-wrapper ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
    (function (window) {
        var INSIGHT_CONFIG = {
            TRANSLATION: {
                POSTS: '文章',
                PAGES: '页面',
                CATEGORIES: '分类',
                TAGS: '标签',
                UNTITLED: '(无标题)',
            },
            CONTENT_URL: '/content.json',
        };
        window.INSIGHT_CONFIG = INSIGHT_CONFIG;
    })(window);
</script>
<script src="/js/insight.js" defer></script>
<link rel="stylesheet" href="/css/search.css">
<link rel="stylesheet" href="/css/insight.css">
    
    

    <script src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.0/source/libs/jquery/jquery.min.js"></script>

    <!-- 引用 鼠标点击实现文字效果 -->
    <script src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.0/source/js/click_show_text.js"></script>

    <!-- //只在桌面版网页启用特效 -->
    <!-- <script type="text/javascript">
        var windowWidth = $(window).width();
        if (windowWidth > 768) {
            document.write('<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.0/source/js/sakura.js"><\/script>');
        }
    </script> -->

     <!-- 实现 鼠标划过彩虹星星掉落跟随效果 -->
     <!-- <script src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.0/source/js/cursor.js"></script> -->

      <!-- tidio聊天工具 -->
    <!-- <script src="//code.tidio.co/hcpgs6vy7zc60cdqvx033yuue25y9vgj.js" async></script> -->

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ["$","$"], ["\\(","\\)"] ],
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
            processEscapes: true
        }
    });
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax();
        for (var i = 0; i < all.length; ++i)
            all[i].SourceElement().parentNode.className += ' has-jax';
    });
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script>if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js?t=1590368958168')
    .then(function () {console.log('ServiceWorker Register Successfully.')})
    .catch(function (e) {console.error(e)});
}
</script><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/shizuku.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"log":false});</script></body>
</html>